<script setup lang="ts">
import { MyVueInstance } from '../types/VueInstance'
import { ref, reactive, getCurrentInstance, inject } from 'vue'
import type { ElForm } from 'element-plus'
import { Router, useRouter } from 'vue-router';
import { Axios } from 'axios';

//消息组件
const elMessage: Function = inject("el-message")

//实例
const _this: MyVueInstance = getCurrentInstance() as MyVueInstance;
//请求函数
const axios: Axios = _this.appContext.config.globalProperties.$axios

//路由组件
const router: Router = useRouter()

type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()

const validateUsername = (rule: any, value: any, callback: any): void => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    if (loginForm.username !== '') {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField('username', () => null)
    }
    callback()
  }
}
const validatePassword = (rule: any, value: any, callback: any): void => {
  if (value === '') {
    callback(new Error('请输入密码'))
  }
  callback()
}

const loginForm = reactive({
  username: '',
  password: '',
})

const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      const {data} = await axios.post("/login", loginForm)
      if (data.status && data.status == 200) {
        elMessage("登录成功", "success")
        router.push("/index")
      } else if (data.status && data.status == 4000) {
        elMessage("登录认证失败,请检查账号密码", "warning")
      }
      elMessage("服务器可能发生了故障,稍后重试", "error")
    } else {
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<template>
  <div class="login-container">
   <div class="container-filter"></div>
   <div class="login-form">
    <div class="welcome-via"></div>
    <el-form
      ref="ruleFormRef"
      :model="loginForm"
      status-icon
      :rules="rules"
      class="demo-ruleForm"
      label-width="50px"
    >
      <el-form-item label="账号" prop="username">
        <el-input
          v-model="loginForm.username"
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >登录</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<style lang="less">
html,
body,
#app {
  height: 100% !important;
}
/*背景局部模糊*/
.login-container{
    width:100%;
    height:100%;
    background-image: linear-gradient(#8b9da9, #fff6e4);
    box-shadow: inset 0 0 100px hsl(0deg 0% 0% / 30%);
    z-index:1;
}
.container-filter{
    width:100%;
    height:100%;
    background: inherit;
    position: absolute;
}
.container-filter:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(15px);/*为了模糊更明显，调高模糊度*/
    z-index: 2;
}


.login-form {
    width: 500px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 100px;
    padding-top: 120px;
    z-index: 2;
    border: 1px solid #d3d3de;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .4);
}

.welcome-via {
  position: absolute;
  width: 150px;
  height: 150px;
  top: -75px;
  left: 180px;
  border-radius: 100px;
  background-color: rgb(250, 250, 250);
  background-image: url(../assets/welcome.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.el-form-item {
  font-size: 20px;
}

.el-form-item__content {
  justify-content: center;
}

.el-button {
  padding: 20px;
}
</style>